How To Make an Otaku Mascot
By XFox Prower
So you want to make a mascot? This page will explain how to in detail,
but before we start, let's see what programs are recommended, needed,
and the reason's for using them. Feel free to use other programs that
can do the job listed in the Task column.
|Utility||Task||Where to get it|
|Otaku Mascot Viewer||The easy to use mascot creater||http://www.atoys.com|
|Animagic32||Multiple frame cropping||http://www.rtlsoft.com|
|Pictview 1.95 (DOS)||Counting colors, bpp cropping, file conversion. Can view and convert between over 140 different graphics formats, new and old||http://www.PictView.com|
|PV 2.78||zoom factors (optional)||http://www.multimediaware.com/pv|
|Windows Notepad||Taking notes, scrap file, other junk||Windows comes with it|
|Windows Paint||Copying, pasting, height/width adjusting||Windows comes with it|
There are a few steps to making your mascot. First, we must know who or
what we want to make. I recommend you rip them from games. If you were to
modify each frame with your customizations and art, that may take a
really long time.
- Getting pics for your Mascot.
- Preparing each frame
- Organizing the colors
- Loading images into the Mascot Viewer
- Click-Only Animations and Sound
To get pics for your mascot, there are several ways. I'll explain how
to do this easy with some commonly used emulators that specialize in
it. Let's assume you want to make your mascot from an animation that
happens when you are standing still for these examples. Also, for
whatever emulator you use, set the frame rate to skip 0 frames. It may
be slow, but if you want a clean animation and perfection, you'll want
From the menus, go to view/layers. Disable
'Scroll B low', 'Scroll A low', and 'Scroll A high'.
These are the background layers. You should be left with your character
and a black screen. Move your character somewhere away from enemies and
danger. You want to get the animation from the beginning, so jump or
something to interrupt it. Just before you land (just before your
animation starts), Pause the emulator (not the game). Do that with
Alt+P. While the emu is paused, you can use
some special options such as frame advancing. Press Alt+A
to advance each frame as if slowmotion at your pace. Do this until the
start of your animation begins. When you see a pic you want, press F9 to capture the entire screen to a file.
the files will increment in number starting at snap000.pcx, snap001.pcx, etc. Follow a pattern of taking snaps and incrementing the frames.
Sometimes, each movement of your character may go every 4 frames, so you are less likely to mess up. But try to stay coordinated, since you may be taking 100+ pics in one go.
You must do it all in one go. The reason is because we want our character in the same spot as before, not closer to the edge of the screen.
In whatever game you pick, go someplace away from danger. Disable all
the background layers. Do that by pressing 1, 2, 3, and 4.
Be sure that 5 is left on. You should have a black background with just
you. Wait a moment for the messages on the screen to go away since they
do appear in snapshots (transparent or not). Press F1 to access the
popup menu. There are 2 options: Incr frame only for advancing each frame,
and snapshot / incr frame for taking a snapshot and then increasing the frame.
On games like FF5, your character is always centered on the screen (the
map moves, not you) and the popup menu gets in the way even if you select
'Move this window'. For cases like that, you
may have to repeatedly do Snap / incr frame.
You won't miss anything that way, but you'll probably have to take over
a thousand pics if it is doing 60 frames per second (I won't verify that -_-!).
Visual Boy Advance
Our 3rd example is an emulator that has an annoying prompt per screenshot
asking for a name and file type for each. It can save as PNG and BMP. The default is
PNG and if you want BMP, you'll have to change it for each snapshot. Chances are, you'll
forget, and be left with a format that you cannot open with Paint. But you can use
Pictview to convert it to a BMP. You can also press Alt+Prt Scrn
to take a snap of the entire emulator window (that's a Windows feature
and should work with anything except some fullscreen games and DVDs)
Also, you cannot disable backgrounds with this emulator, so try to find
a simple background to stand by such as a wall that has no pattern or
detail. Make sure that the screen size is set to 1x1 pixels. If it is 2x2,
you can use PV (Do not confuse this with Pictview!) to convert an image with a
50% zoom factor. But for so many snaps, save yourself the work and
don't make the mistake. You can always do a 200% zoom later if you want
anyway. Note for the wise: Do not use Snes9x for this. It's screen
stretching ruins everything. It can have 2x2 pixels and for every third
line, a 2x3 and it ruins everything. Zsnes takes clean 1x1 images
nomatter what resolution you are using (it does this with each snapshot
End of Step 1. You should now have several pics for your mascot
Move all your snapshots to a new folder. This will be your work folder,
but name it as you wish. I recommend you make a copy of it too. Open
Animagic and open all of your images at once (they should all be in abc
order due to the #s in the names). It should make an animated gif of
all your snapshots. Make sure that there are less than 256 colors used
in the total amount of colors or the gif will lose colors (don't
worry, mascots don't have a 256 color limit. They do have a
320x240 per frame limit though). View the palette from the view
menu to check this.
Now that all of your frames are loaded, it's time to crop them. Some
images may be bigger than others on 1 side. For example, Tails' tails
take up different amounts of space on the screen when they are extended
behind him than on some frames where they are sticking up. Go to
frames/crop. Click on 'select all'
and your image should have a dotted line around it. Adjust each control
to move the line closer to your mascot. We want to cut out some of the
background. Don't come too close to your mascot. It may look safe to do
so in the displayed frame, but you may be cutting out something in
another frame. Just do a little bit of a crop so you have plenty of room
around him but have eliminated alot of the background. Now that the image
is smaller, we can zoom in and get more detail. Zoom in as far as you can
without getting scrollbars. Look at all of your frames and find which
one comes closest to the left side of the screen. With that frame
displayed, crop again. Crop as close to this end as possible (this is
easier with the zoom). Don't worry about other images having space to
spare on the left edge of them, they must be able to line up with this
image since it is longer there. Find the image with the tallest part of
your sprite and do this step again. It is very important that each frame
lines up with the left and top sides since a mascot is drawn from left to right
and top to bottom when displayed. You can crop the bottom and right sides
of every frame as far as they'll go even if they are of varying sizes
without having to worry. Don't make any transparent colors since we'll
be converting each frame back to bmp later. Make a new folder in your
work folder. Save the gif there. Then select file/save frames to save
each frame of the gif to a new gif in that folder.
(anim00.gif, anim01.gif, etc.)
If you don't have Animagic or have problems with it (like me), then do
this step. Also, you don't have to worry about keeping your colors to
256 if you do it this way. Read the original first though, so you get
the idea. Open the first frame in Paint. I've seen Paint on some
computers that cannot open GIF or PCX files, but I've only seen that
problem on Windows 95 and 2000. Windows 98 SE works fine. Use pictview
to convert to BMP if you need to. Since you have a black background on
your screenshots (if you were able to disable backgrounds on your
emulator), then you should fill the blackness with a color that stands
out more. I'd use dark pink or dark green for this since it's not too white, not too
black, and most likely not even close to any colors on your mascot.
Your mascot should now be clearly and easily visible. There may be a
black outline (but not totally black) around him that was not easily
seen with that black background, so that's important. Next, zoom in to
about 800% or as far as you can while keeping your mascot on screen.
Use the dotted line thinie to select your mascot. Copy him. Change your
height and width with Alt+E
to 1x1. Paste
your pic. Windows will ask if you want the screen resized (due to it
being too small). Say yes and it will be perfectly sized for your pic.
You may repeat this until this image is cropped perfectly. Also, remember
how the background was black? When you filled it to pink, it only did the
outside. there may be a spot was also ment to be part of the background.
For example: There's a spot between S3 Tails' hair that doesn't touch
outside to be changed, but is isn't meant to be 'black' or dark pink'
. Change it to the same color as the background. NOTE: The first pixel
(coordinates 0,0 or the top left corner) is the color that will be the
transparent color when the mascot is made. That is the background. With
all that done, save the image as something like frame001.bmp. Make sure
it's a 24-bit bmp, because we all know that Paint loves to ruin the
quality of 8-bit pictures by using a fixed 256 color palette (the vga
one?) We'll fix the colors later. Open your next frame and repeat the
process. Leave your previous pic open for each new one you do. This way
you can see if there's a problem with lining them up. If a wide image
moves everything to the right, you must adjust all the other images to
be shifted to the right just as much or it won't look right. To do that,
and adjust the width to that of
the wide pic. You'll have some white space on the right. Press
to select your entire pic and drag
it to the right so the white space will be on the left (your pic
shifted to the right). Here's an example below of 2 images with varying
These pics were from the work folder of my 'Sonic Advance Tails'. Notice
in the 'Right' column that his hair and shoes line up exactly, but his tails
don't; they're not supposed to. Notice how on the pics in the 'Wrong' column
it Tails doesn't line up correctly. That's what you'll see in the viewer if
you don't fix it. The only difference from the 2nd 'Wrong' and 'Right'
pics are that the right one has the image shifted to the right and the
black area to the left in order to align him.
If you make the width of an image longer, fill in the white area after
you drag your image so it matches your background color. Remember that you'll have to take the height into consideration
and do this again if one image is taller than the others when cropped.
End of Steps 2. At the end of these steps, you should have all of your images cropped and
shifted to be properly lined up and viewed.
It's almost time to load the pictures into the Mascot Viewer (the editor).
But first, we must (for performance sake) make each pic have the correct
amount of colors. We saved them all as 24-bit (1.6 million colors).
Make a copy of the folder that has all of your cropped pics.
Here's where pictview comes in. Open Pictview and go to the directory
that has all of your cropped images. On any image, press F8
and select Count used colors
. This will count
how many colors are actually used in your picture. Press esc to return
and press F8
again. This time, select
Reduce Number Of Colors
. Round up to the closest
power of 2 with the amount of colors actually used. Example: 12 colors
rounds up to 16, 32 colors is just 32, and 33 colors rounds up to 64.
Count and reduce each of your other images one at a time. Make sure
that Compress 256 color BMP files
is disabled in the options screen (F7)
If you get a message saying "cannot find cfgpv.exe",
then don't worry. It's disabled by default. I don't know if the Mascot
Viewer likes compressed images. (some programs don't). Mascot viewer
can also open LBM files (Pictview can convert images to it) but Pictview
by default compresses LBM files. Convert all of your truecolor BMP files to the lowest color of
Windows BMP format (Don't use OS/2). If you backed up this folder, feel free to overrite them.
End of Step 3. All your cropped images should have the appropriate amount of colors and saved as Windows BMP.
Open the Mascot Viewer. Observe the mascot for awhile. (It came with
2, and they seem to get pretty pissed when you click on them, if that
gives you any ideas). Right click the mascot or the icon in the taskbar
and select Create Mascot
You should see a
menu of mascot creating stuff. Give it a name in the name field and you
can also fill in the creator info. Select Add Frame
and load your first image. It should display on top of the screen. If your
mascot should be sitting and hanging over the window, play with the offset by
the name. Set the Delay for the amount of milliseconds you want them
to be viewed. 60 works most of the time. 60/60 (min/max) shows that
frame for 60 seconds every time. 60/80 pics a random amount between 60
and 80 Delay. Leave the loop part alone for now. Load all of your images
in. If you named them with numbers at the end starting at 01 or 001 if
you have so many, then they will match the frame No. You can click each
frame (while stopped) to see that frame. This is useful for finding identical
images. When a frame is selected, it's button is pressed to show it is active.
If you select Add Frame
while a frame is active, the
frame will be inserted in front of the active frame. Make sure that all of your
frames line up correctly. Click around frame by frame making sure not to notice the slightest
jump. If they don't line up correct, review step 2 about shifting the height and width. Test your
mascot for bugs and shifting. When you have gotten all of them out, continue on. Whenever you
make a change to an image, reload it into the viewer. Also, please be aware that the work files
load every frame from their
original location, so you shouldn't rename them. or delete your old images that you loaded into
the work file.
End of Step 4. You should have all of your images loaded into the viewer
and have a good feel of the program.
This is the hardest part of all if you want it done correctly, but it is optional.
Before you start this, save your work file. and publish it if you wish.
look through your frames 1 at a time from it's start. (click stop if
it is moving on its own.) Try to catch duplicate images by clickinging
them. Take notes, since this part is critical. Open Notepad and keep
track of it in any way you can remember. I keep it like this:
frame = file
001 = m001.bmp
002 = m002.bmp
003 = m003.bmp
004 = m004.bmp
005 = m005.bmp
006 = m006.bmp
There are no rules to the notes. There's no format. It can be the
messiest thing on Mobius and no one will care. What matters is that it
is understandable by you. Though, I encourage you to make it look like
a draft of the frames screen. If you find out that m006.bmp is
identical to m001.bmp (frame 1 = frame 6), then load m001.bmp for frame
6. This may (but I'm not certain) improve file size by using the same image.
In that example, your screen may look like this.
001 = m001.bmp
002 = m002.bmp
003 = m003.bmp
004 = m004.bmp
005 = m005.bmp
006 = m001.bmp
Lets say you kept going and had 11 frames, but found that the first 10 frames
were just a repeat of the first five frames. For this, you set a loop
on frame 5. Set the Next on frame 5 to go to 1. Then set the min and
max to 1. This will tell the viewer to play the first 5, frame 5 will
tell it to jump to frame 1 1 time. After that 1 loop, frame 5
will let you go on to frame 6 (you may have it named m011.bmp, but it
doesn't matter). To separate confusing loop areas, Mascot Viewer
changes the background from red to green after the loop point. There
are many other colors, I've never ran out, nor have I any doubt that I
will, so it's a really cool feature of the program. Just like with the
Delay, you can specify the Min and Max amount of times to loop. This
can be useful to randomize an amount of times a mascot blinks his eyes.
Try to simplify each duplicate image and loop as much as you can. It
will make the mascot unbelievably small for the effort.
End of Step 5. Your mascot should be pretty well looped where necessary.
Click-only frames are frames that are only shown when you click the
mascot. It should be something interactive since it's you
his attention. Often, it's some kind of dirty look or something,
possibly because they don't know where you intend to stick that arrow.
^_^. To add click-only frames, just add them like any other frames. But
set the last frame of the viewable frames to jump to 1 and set the min
and max to 0 (meaning always jump to frame 1). This will prevent your
click-only frames added beyond there from being viewed.
For example: Frame 50 may be your last viewable frame. Set its loop to
1/0/0. If you want to add a 5 frame click-only animation, add them.
Then click above where it says Click Animation Active
For the range, put 51 to 55 since you added 5 images. Once the range of
click-only frames are entered, those frames will have a gray background
on the frame screen, similar to how the looping changed the menu colors
between looping areas. You may also add a WAV file that will when you
click the mascot, but often the WAV is 3 times bigger than the actual
Mascot. When you are finished, it's time to publish. Publishing your
Mascot converts all of your images, creator info, delay, looping, and
sound to a single file. You cannot open a published mascot to work on
but you can with the work files.
End of Step 6. Congratulations.
That's the end of the tutorial. I hope it covered everything and was
clear and understandable. If it wasn't, e-mail me with questions or
find me on Aim for live assistance.
Back To Other